import React, { useState, createContext, useContext } from 'react';
import { ProSidebarProvider } from 'react-pro-sidebar';
import MyProSidebar from './MyProSidebar';
import { Outlet } from 'react-router-dom';
const SidebarContext = createContext({});

export const MyProSidebarProvider = ({ children }) => {
  const [sidebarRTL, setSidebarRTL] = useState(false);
  const [sidebarBackgroundColor, setSidebarBackgroundColor] = useState(undefined);
  const [sidebarImage, setSidebarImage] = useState(undefined);
  return (
    <ProSidebarProvider>
      <SidebarContext.Provider
        value={{
          sidebarBackgroundColor,
          setSidebarBackgroundColor,

          sidebarImage,
          setSidebarImage,

          sidebarRTL,
          setSidebarRTL,
        }}
      >
        <div
          style={{
            display: 'flex',
            flexDirection: sidebarRTL ? 'row-reverse' : 'row',
          }}
        >
          <MyProSidebar />
          <div style={{ height: '100%', width: '100%' }}>
            <main>
              {children}
              <Outlet />
            </main>
          </div>
        </div>
      </SidebarContext.Provider>
    </ProSidebarProvider>
  );
};

export const useSidebarContext = () => useContext(SidebarContext);
